<template>
  <div
    class="dayplan-item"
    @click="showDetails"
  >
    <div class="text">
      <div class="tit">
        {{ plan.beamNo }}
      </div>
      <div
        class="status"
        :status="plan.status"
      >
        当前状态：<span>{{ status }}</span>
      </div>
      <div
        class="option"
        v-show="!noEditable"
        v-if="plan.addTask == 1"
      >
        <van-button
          plain
          type="danger"
          size="small"
          @click.stop="remove"
        >
          删除任务
        </van-button>
        <van-button
          plain
          type="info"
          size="small"
          @click.stop="submit(2)"
        >
          调整任务
        </van-button>
      </div>
      <div
        class="option"
        v-show="!noEditable"
        v-else
      >
        <van-button
          plain
          type="danger"
          size="small"
          @click.stop="submit(1)"
        >
          下达任务
        </van-button>
      </div>
    </div>
    <div
      class="remove"
      @click.stop="cancel"
      v-show="!noEditable"
    >
      <van-icon name="close" />
    </div>
    <div class="right">
      <van-icon name="arrow" />
    </div>
  </div>
</template>

<script>
export default {
  name: "DayplanItem",
  props: {
    plan: {
      type: Object,
      default: () => {
        return {};
      },
    },
    noEditable: {
      type: Boolean,
      default: () => false,
    },
  },
  computed: {
    status() {
      return { 1: "未开始", 2: "进行中", 3: "已完成" }[this.plan.status];
    },
  },
  data() {
    return {};
  },
  methods: {
    showDetails() {
      this.$router.push({
        path: "/task/set/" + this.plan.preBridgeId,
        query: {
          type: "plan",
        },
      });
    },
    cancel() {
      // 取消计划
      this.$dialog
        .confirm({
          title: "提示",
          message: "此操作将取消该计划, 是否继续?",
        })
        .then(() => {
          this.$emit("cancel", this.plan);
        })
        .catch(() => {});
    },
    remove() {
      // 删除任务
      this.$dialog
        .confirm({
          title: "提示",
          message: "此操作将清空工序时间, 是否继续?",
        })
        .then(() => {
          this.$emit("remove", this.plan);
        })
        .catch(() => {});
    },
    submit(type) {
      this.$emit("submit", this.plan, type);
    },
  },
};
</script>

<style lang="scss" scoped>
.dayplan-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;

  .text {
    flex: 1;
    width: 0;
    padding: 15px;

    .tit {
      font-size: 16px;
      line-height: 30px;
    }

    .status {
      font-size: 14px;
      &[status="1"] {
        span {
          color: #ba3131;
        }
      }
      &[status="2"] {
        span {
          color: #e4b25e;
        }
      }
      &[status="2"] {
        span {
          color: #13ae1d;
        }
      }
    }

    .option {
      padding: 10px 0 0;

      .van-button {
        margin-right: 15px;
      }
    }
  }

  .remove {
    padding: 15px;
  }

  .right {
    padding: 10px;
  }
}
</style>
